<template>
	<view class="content">
			<u-collapse :border="false" ref="collapses" v-if="firstLoaded || isCurrentPage">
				<u-collapse-item :title="item.group_name" :clickable="false" :isLink="false" v-for="(item,index) in friendGroupList" :key="index">
					<text slot="value" class="groupvalue">
						{{item.data.length}}
					</text>
					
					<view class="listitemview">
						<friendGroupItem v-for="(cell, idx) in item.data" :key="'item'+idx" :item="cell" :index="idx"></friendGroupItem>
					</view>
				</u-collapse-item>
			</u-collapse>
	</view>
</template>

<script>
	import friendGroupApi from "@/services/api/friendsGroup.js"
	import friendGroupItem from './friend_group_item.vue'
	import {
		mapState
	} from 'vuex'
	export default {
		name: 'friend_group',
		data() {
			return {
				grouplist:[],
				
				// 当前组件是否已经加载过了
				firstLoaded: false,
				
				// 是否滚动到当前页
				isCurrentPage: false
			}
		},
		components:{
			friendGroupItem
		},
		props:{
			// 当前组件的index，也就是当前组件是swiper中的第几个
			tabIndex: {
				type: Number,
				default: function(){
					return 0
				}
			},
			// 当前swiper切换到第几个index
			currentIndex: {
				type: Number,
				default: function(){
					return 0
				}
			},
			searchval:{
				type: String,
				default: function(){
					return ''
				}
			},
		},
		computed: {
			...mapState({
				friendList: state => state.friends.friendList,
				friendOnline: state => state.friends.friendOnline,
			}),
			friendGroupList(){
				//这里是现在离线排序，要求的时候再打开
				let friendData = JSON.parse(JSON.stringify(this.friendList))
				friendData.sort((friend1, friend2) => {
					  const isFriend1Online = this.friendOnline[friend1.friend_idx] || false; // 判断friend1是否在线
					  const isFriend2Online = this.friendOnline[friend2.friend_idx] || false; // 判断friend2是否在线
					  
					  // 如果friend1在线而friend2不在线，将friend1排在前面
					  if (isFriend1Online && !isFriend2Online) {
						return -1;
					  }
					  // 如果friend2在线而friend1不在线，将friend2排在前面
					  if (!isFriend1Online && isFriend2Online) {
						return 1;
					  }
					  // 否则保持原来的顺序
					  return 0;
				});
				let newdata = JSON.parse(JSON.stringify(this.grouplist))
				console.log(newdata);
				for (let index in newdata) {
					let data = newdata[index]
					if(data.group_id == 0){
						newdata[index].data = friendData.filter(item=>{
							if(this.searchval && item.friend_remark.indexOf(this.searchval) === -1 && item.nick_name.indexOf(this.searchval) === -1){
								return false
							}
							return item.friend_group == data.group_id || !item.friend_group
						})
					}else{
						newdata[index].data = friendData.filter(item=>{
							if(this.searchval && item.friend_remark.indexOf(this.searchval) === -1 && item.nick_name.indexOf(this.searchval) === -1){
								return false
							}
							return item.friend_group == data.group_id
						})
					}
				}
				let searchData = newdata.filter(item => {
					// 根据名字筛选
					if (this.searchval && !item.data.length) {
						return false;
					}
					return true;
				});
				return searchData
			}
		},
		watch:{
			friendGroupList(newValue, oldValue) {
			   this.$nextTick(()=>{
			   	 this.$refs.collapses && this.$refs.collapses.init()
			   })
			},
			currentIndex: {
				handler(newVal) {
					if(newVal === this.tabIndex){
						// 懒加载，当滑动到当前的item时，才去加载
						if(!this.firstLoaded){
							this.getlist()
							this.isCurrentPage = true;
						}
					}
				},
				immediate: true
			},
		},
		created() {
			console.log(this.firstLoaded || this.isCurrentPage);
			//通知页面
			uni.$on('onFriendGroupManage', this.onFriendGroupManage)
			// this.getlist()
		},
		destroyed() {
			uni.$off('onFriendGroupManage', this.onFriendGroupManage)
		},
		methods: {
			searchInput(e){
				uni.$u.debounce(()=>{
					this.searchval = e
				}, 500,false)
			},
			async getlist(){
				try{
					let resapi = await friendGroupApi.list()
					if(resapi){
						this.grouplist = resapi.list
						this.firstLoaded = true;
					}
				}catch(e){
					//TODO handle the exception
				}
			},
			onFriendGroupManage(data){
				switch (data.type){
					case 'add':
						this.grouplist.push(data.data)
						break;
					case 'edit':
						let indexedit = this.grouplist.findIndex(it=>it.group_id == data.data.group_id)
						console.log(indexedit)
						if(indexedit != -1){
							this.$set(this.grouplist[indexedit],'group_name',data.data.group_name)
						}
						break;
					case 'del':
						let indexdel = this.grouplist.findIndex(it=>it.group_id == data.data.group_id)
						if(indexdel != -1){
							this.grouplist.splice(indexdel,1)
						}
						break;
					default:
						break;
				}
			},
			manageClick(){
				this.$Router.push({
					name: 'friend_group_manage'
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	.typetag{
		white-space: nowrap;
		font-size: 20rpx;
		color: #FFFFFF;
		padding: 0 10rpx;
		height: 28rpx;
		margin-left: 10rpx;
		line-height: 28rpx;
		text-align: center;
		border-radius: 10rpx;
		background-color: #FF7676;
	}
	.groupvalue {
		color: #61626e;
		font-size: 24rpx;
	}
	.content{
		height: 100%;
		overflow-y: auto;
	}
</style>